<template>
  <div>
    <el-card class="box-card">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="自然班名">
          <el-input v-model="form.nClassName"></el-input>
        </el-form-item>
        <el-form-item label="电子邮箱">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item label="个人电话">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">更新信息</el-button>
          <!-- <el-button>取消</el-button> -->
        </el-form-item>
      </el-form>
    </el-card>

    <hr>
    <!-- 千帆竞发图 -->
    <!-- <div id="linechart" style="height:2000" ref="myEchart">这是一个dom</div> -->
    <!-- <line-chart :chart-data="lineChartData" /> -->
    <!-- <el-image
      style="width: 100px; height: 100px"
      :src="src/assets/班级千帆竞发图.png"
      :fit="fit"></el-image> -->
      <img src="src/assets/班级千帆竞发图.png"/>
  </div>
</template>
<script>
import LineChart from "../dashboard/admin/components/LineChart";
export default {
  components: {
    LineChart
  },
  data() {
    return {
      form: {
        name: "",
        nClassName: "",
        email: "",
        phone: ""
      },
      chart: null, //图表
      lineChartData: {
        expectedData: [100, 120, 161, 134, 105, 160, 19],
        actualData: [120, 82, 91, 154, 162, 140, 14,88],
        actualDat1: [12, 82, 91, 154, 162, 140, 14,8],
      }
    };
  },
  // mounted(){
  //    this.initChart()
  // },
  methods: {
    // initChart(){
    //   console.log('init被调用')
    //   console.log(this.$refs.myEchart)
    //    this.chart = this.$echarts.init(this.$refs.myEchart);
    //    console.log(chart);
    //    this.chart.setOption({
    //     color: ['#3398DB'],
    //     tooltip: {
    //       trigger: 'axis',
    //       axisPointer: { // 坐标轴指示器，坐标轴触发有效
    //         type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    //       }
    //     },
    //     grid: {
    //       left: '3%',
    //       right: '4%',
    //       bottom: '3%',
    //       containLabel: true
    //     },
    //     xAxis: [{
    //       type: 'category',
    //       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    //       axisTick: {
    //         alignWithLabel: true
    //       }
    //     }],
    //     yAxis: [{
    //       type: 'value'
    //     }],
    //     series: [{
    //       name: '直接访问',
    //       type: 'bar',
    //       barWidth: '60%',
    //       data: [10, 52, 200, 334, 390, 330, 220]
    //     }]
    //   })
    // },
    onSubmit() {}
  }
};
</script>
